<template>
    <div class="web-container password">
        <div class="password-content">
            <div class="content">
                <span class="title">忘记密码</span>
                <div class="list">
                    <span> <img src="/static/images/header/icon1.png" alt=""></span>
                    <el-input v-model="input" placeholder="请输入手机号"></el-input>
                </div>
                <div class="list">
                    <span> <img src="/static/images/header/icon2.png" alt=""></span>
                    <el-input v-model="code" placeholder="请输入短信验证码"></el-input>
                    <el-button type="primary" round @click="start" :disabled="disabled || time > 0">{{text}}</el-button>
                </div>
                <div class="list">
                <span> <img src="/static/images/header/icon3.png" alt=""></span>
                    <el-input v-model="password" placeholder="请输入新密码"></el-input>
                </div>
                <div class="list">
                    <el-button type="primary" round @click="changePwd">修改</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {sendMessage,getUserIdByPhone,upDatePwd} from "@/api/index";
export default {
  data() {
    return {
      input: "",
      code: "",
      argsCode:"",
      password: "",
      time: 0, 
      disabled:false,
      second:60,
      id:""
    };
  },
  components: {},
  computed: { 
        text: function () { 
            return this.time > 0 ? this.time + 's 后重获取' : '获取验证码'; 
        } 
  },
  created(){
     
  },
  methods:{
      changePwd(){
          if(this.input){
              if(this.code){
              if(this.code == this.argsCode){
                  if(this.password){
                      console.log(this.password)
                      console.log(this.id)
                      upDatePwd(this.id,this.password).then(res=>{
                           this.$message({message: res.data.msg,type: 'success'});
                           this.input = ''
                           this.code = ''
                           this.argsCode = ''
                           this.password = ''
                           this.id = ''
                        //   console.log(res.data.msg)
                      })
                  }else{
                      this.$message.error('修改密码为空!');
                 return;
                  }
              }else{
                 this.$message.error('手机验证码不正确!');
                 return;
              }
          }else{
              this.$message.error('手机验证码不能为空!');
              return;
          }
          }else{
               this.$message.error('手机号码不能为空!');
              return;
          }
      },
       start(){ 
         var telReg = !!this.input.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
          if(telReg == false){
              this.$message.error('手机号码格式不正确!');
              return false
          }
         this.time = this.second; 
         console.log(this.disabled); 
         this.timer();
         this.sendMessage();
        }, 
        sendMessage(){
            // const phone = '17888102939'
            sendMessage(this.input).then(res=>{
                this.$message({message: '恭喜你，验证码发送成功!',type: 'success'});
                // console.log(res.data.args)
                this.argsCode = res.data.args
                 getUserIdByPhone(this.input).then(res=>{
                     if(res.data.state=='F'){
                        this.$message.error(res.data.msg);
                        return;
                     }else{
                         this.id = res.data.data
                     }
                    // console.log(this.id)
                })
          
            })
        },
        timer(){ 
            if (this.time > 0) { 
                this.time--; 
                setTimeout(this.timer, 1000); 
            }else{ 
             this.disabled = false; 
            } 
        } 
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
    .password .password-content .content .title{
        color: #e93926;
    }
}
.password {
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  .password-content {
    width: 500px;
    margin: 50px auto;
    .content {
      width: 400px;
      display: flex;
      flex-direction: column;
      .title{
          text-align: center;
          display: inline-block;
          padding: 25px 0;
          font-size: 20px;
          color:#15c798;
      }
      .list{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          span{
              margin-right: 10px;
          }
          .el-button{
              margin-left: 10px;
          }
      }
      .list:last-child{
          .el-button{
              width: 100%;
          }
      }
    }
  }
}
</style>
<style lang="less">
.password {
  .password-content {
    .content {
      .el-input__inner {
        border-radius: 20px;
        width: 100%;
        flex:1
      }
    }
  }
}
</style>



